import React from 'react';
import {getCategory} from './../../api';
import {set,get} from './../../store';
import Clock from './../common/clock.js'

class MenuBox extends React.Component {
	constructor(props) {
		super(props);
		this.state = {categorys:[]};
	}

	componentWillMount() {
		let menus = get('menu');
		let categorys = null;
		if(menus) {
			categorys=JSON.parse(menus);
		}
		if(categorys!=null && categorys.length>0) {	
			this.setState({
				categorys
			});
		} else {
			getCategory({}).then(res=>{
				const categorys = res.content;
				set('menu',JSON.stringify(categorys));
				this.setState({categorys});
			});
		}
	}

	render() {
		return (
			<div className="menuheader">
				<div className="menutop">
					<ul>
						{this.state.categorys.map(category=>
							<li key={category.id}><a href={"postlist?categoryid="+category.id}>{category.categoryName}</a></li>
						)}
					</ul>
					<div className="menuright">
						<Clock />
					</div>
					<div className="clear"></div>
				</div>
			</div>
		)
	}
}

export default MenuBox;